<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器 钻则标签设置样式  */
        
        div{
            width: 100px;
            height:100px;
            background-color:red;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- ctrl + /直接显示在浏览器中 ctrl+enter可以换行 -->
     <!--  -->
    <div>我是一个div</div>
    <div>我是一个div</div>
    <p>段落标签</p>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!-- 行内元素：
     1.与其他行内元素 一行空间
     2.高度默认由元素内容撑起
     3.无法通过css属性设置宽高
     -->
    <span>我是行内元素</span><span>我是行内元素</span>
    <em>斜体标签</em>
    <i>斜体标签</i>
    <strong>加粗标签</strong>
    <sub>下标</sub>
    <sup>上标</sup>
    <!-- 超链接标签  target控制页面打开方式_blank新开页面打开_self自身页面打开-->
     <a href="https:www.baidu.com" target="_blank">百度一下</a>
     <!-- 可以用来做锚点 -->
      <a href="#">回到顶部</a>
    <!-- 常见标签 img标签 a标签 video视频标签 audio音频标签 -->
     <!-- 图片标签 属性 标签内部属性 属性名=‘属性值’src属性链接到图片地址 alt图片加载失败文字说明
      ./当前目录 ../上级目录 
     -->
      <img width="200px" src="../音视频/6.jpg" alt="图片加载失败的文字说明"> 
      <img  height="200px" src="https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399" alt="">
      <!-- 视频标签  width和height也可以设置给视频
       controls控制条
       autoplay自动播放
       Loop循环播放
       muted 静音播放
       poster 封面
      -->
       <video poster="../音视频/6.jpg" muted loop width="300px"  controls src="../音视频/1.mp4"></video>
       <!-- 音频audio 不可以使用poster width height-->
        <audio controls src="../音视频/1.mp3"></audio>
</body>
</html>